//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin layout-spacing($type: padding, $direction: all, $device: responsive, $is_important: false) {
    $suffix: "";
    @if $is_important != false {
        $suffix: " !important";
    }
    @if $device==responsive {
        @if $direction==all {
            @media (max-width: $screen-sm-max) {
                #{$type}: #{$m-layout-spacing}#{$suffix};
            }
            @media (min-width: $screen-md) {
                #{$type}: #{$t-layout-spacing}#{$suffix};
            }
            @media (min-width: $screen-lg) {
                #{$type}: #{$layout-spacing}#{$suffix};
            }
        } @else if $direction==top {
            @media (max-width: $screen-sm-max) {
                #{$type}-top: #{$m-layout-spacing-top}#{$suffix};
            }
            @media (min-width: $screen-md) {
                #{$type}-top: #{$t-layout-spacing-top}#{$suffix};
            }
            @media (min-width: $screen-lg) {
                #{$type}-top: #{$layout-spacing-top}#{$suffix};
            }
        } @else if $direction==right {
            @media (max-width: $screen-sm-max) {
                #{$type}-right: #{$m-layout-spacing-right}#{$suffix};
            }
            @media (min-width: $screen-md) {
                #{$type}-right: #{$t-layout-spacing-right}#{$suffix};
            }
            @media (min-width: $screen-lg) {
                #{$type}-right: #{$layout-spacing-right}#{$suffix};
            }
        } @else if $direction==bottom {
            @media (max-width: $screen-sm-max) {
                #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix};
            }
            @media (min-width: $screen-md) {
                #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix};
            }
            @media (min-width: $screen-lg) {
                #{$type}-bottom: #{$layout-spacing-bottom}#{$suffix};
            }
        } @else if $direction==left {
            @media (max-width: $screen-sm-max) {
                #{$type}-left: #{$m-layout-spacing-left}#{$suffix};
            }
            @media (min-width: $screen-md) {
                #{$type}-left: #{$t-layout-spacing-left}#{$suffix};
            }
            @media (min-width: $screen-lg) {
                #{$type}-left: #{$layout-spacing-left}#{$suffix};
            }
        }
    } @else if $device==tablet {
        @if $direction==all {
            #{$type}: #{$t-layout-spacing}#{$suffix};
        } @else if $direction==top {
            #{$type}-top: #{$t-layout-spacing-top}#{$suffix};
        } @else if $direction==right {
            #{$type}-right: #{$t-layout-spacing-right}#{$suffix};
        } @else if $direction==bottom {
            #{$type}-bottom: #{$t-layout-spacing-bottom}#{$suffix};
        } @else if $direction==left {
            #{$type}-left: #{$t-layout-spacing-left}#{$suffix};
        }
    } @else if $device==mobile {
        @if $direction==all {
            #{$type}: #{$m-layout-spacing}#{$suffix};
        } @else if $direction==top {
            #{$type}-top: #{$m-layout-spacing-top}#{$suffix};
        } @else if $direction==right {
            #{$type}-right: #{$m-layout-spacing-right}#{$suffix};
        } @else if $direction==bottom {
            #{$type}-bottom: #{$m-layout-spacing-bottom}#{$suffix};
        } @else if $direction==left {
            #{$type}-left: #{$m-layout-spacing-left}#{$suffix};
        }
    }
}
